<template>
    <div class="aside-container">
        <Avatar src="http://5b0988e595225.cdn.sohucs.com/images/20190317/c50ef246e0e74a4aa4a5d43d1dfe5e9b.jpeg"
            :width="150"></Avatar>
        <h3 class="title">初白的个人空间</h3>
        <NavLinks></NavLinks>
        <Contact :common="asideData.common"></Contact>
    </div>
</template>

<script setup>
import Avatar from "../Avatar/index.vue";
import NavLinks from "./NavLinks/index.vue";
import Contact from "./Contact/index.vue"
import { onBeforeMount, reactive } from "vue"
import store from "@/store";
let asideData = reactive({
    common: {}
});
onBeforeMount(async () => {
    const { data } = await store.dispatch('common/asyncGetCommonData');
    asideData.common = data;
})
</script>

<style  scoped>
.aside-container {
    width: 100%;
    height: 100%;
    background-color: #040404;
    box-sizing: border-box;
    padding: 20px 0;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
}

.title {
    color: #fff;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    margin: 20px 0;
}
</style>